<script lang="ts" setup>
import { ref, onMounted } from "vue";
interface Props {
  tabList: Array<string>;
  activeColor?: string;
  modelValue: number;
  fontSize?: number;
}
const props = withDefaults(defineProps<Props>(), {
  tabList: () => ["求求你传点数据吧", "再不传我删了你", "再不传我删了你"],
  activeColor: "#3da0fc",
  modelValue: 0,
  fontSize: 15,
});
const emit = defineEmits(["update:modelValue"]);
const changeTab = (index: number): void => {
  emit("update:modelValue", index);
};
//----
const tabItemWidthArr = ref<number[]>([]);
onMounted(() => {
  const tabItemSelector = document.querySelectorAll(".itemText");
  tabItemSelector.forEach((item, index) => {
    tabItemWidthArr.value[index] = parseFloat(
      window.getComputedStyle(item).width
    );
  });
});
</script>
<template>
  <div class="conTab">
    <div
      class="tabItem"
      :style="{
        color: modelValue === index ? activeColor : 'black',
      }"
      v-for="(item, index) in tabList"
      :key="index"
      @click="changeTab(index)"
    > <div class="itemText">
      {{ item }}
    </div>
    </div>
    <div class="activeLine">
      <div class="line"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.conTab {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: v-bind("fontSize+'px'");
  position: relative;
  .tabItem {
    flex: 1;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    &:hover{
      color: v-bind("activeColor")!important;
    }
    .itemText{
      width: fit-content;
      margin:auto;
    }
  }
  .activeLine {
    position: absolute;
    bottom: -10px;
    left: v-bind("`${100/tabList.length*modelValue}%`");
    width: v-bind("`${100/tabList.length}%`");
    height: 2px;
    transition: all 0.3s;
    .line {
      height: 100%;
      width: v-bind("`${tabItemWidthArr[modelValue]}px`");
      margin: 0 auto;
      background-color: v-bind("activeColor");
    }
  }
}
</style>
